<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>个人信息</title>
</head>
<style>
.font_you{
 font-family: 幼圆;
}
</style>
<body style="background-color: rgba(187, 179, 179, 0.38);" onload="loadMessageCount()">
<div class="container">
         <jsp:include page="header.jsp"/>
<h1 class="col-sm-12" style="font-family:迷你简菱心;">会议管理系统</h1>
<br><br><br>
<div class="col-sm-2">
			<div data-spy="affix" data-offset-top="160" data-offset-bottom="0">
				<ul class="nav nav-pills nav-stacked">
					<li class="dropdown"><a class="dropdown-toggle"
						data-toggle="dropdown" href="myMeetingInfo.action"> 我的会议<span class="caret"> </a>
						<ul class="dropdown-menu">
							<li><a href="myMeetingInfo.action#future7">未来7天内的会议</a></li>
							<li><a href="myMeetingInfo.action#myOrder">我预约的会议</a></li>
							<li><a href="myMeetingInfo.action#ended">已结束的会议</a></li>
							<li><a href="myMeetingInfo.action#cancel">已取消的会议</a></li>
						</ul>
					</li>

					<li class="dropdown"><a class="dropdown-toggle"
						data-toggle="dropdown" href="#"> 申请会议<span class="caret"></span>
					</a>
						<ul class="dropdown-menu">
							<li><a href="applyByTimeAndNumber.action">通过时间和容量</a>
							</li>
							<li><a href="applyMeetingByAddress.action">通过地点</a>
							</li>
						</ul>
					</li>
					<li class="active"><a href="personalInfo.action">
							个人信息</a>
					</li>
					<li><a href="getInvitationInfo.action">
							<span class="badge pull-right" id="mCount"></span>消息</a>
					</li>

				<c:if test="${sessionScope.adminFlag == '1'}">
						<li><a type="button" data-toggle="collapse" data-target="#admin">管理功能</a></li>
						</c:if>
				</ul>
				<div id="admin"  class="collapse">
					<ul class="nav nav-pills nav-stacked">
						<li><a href="getPersonAction.action">人员管理</a>
						</li>
						<li><a href="GetMeetingRoomAction.action"><span
								class="badge pull-right"></span>会议室管理</a>
						</li>
						<li><a href="getDeviceAction.action"><span
								class="badge pull-right"></span>设备管理</a>
						</li>
						<li><a href="getDepartmentAction.action"><span
								class="badge pull-right"></span>部门管理</a>
						</li>
						<li><a href="GetMeetingAction.action"><span
								class="badge pull-right"></span>会议管理</a>
						</li>
					</ul>
				</div>
				<!-- 管理界面 -->


			</div>
			<!--  -->
		</div>
  <div class="col-sm-6">
  <ol class="breadcrumb">
  <li><a href="myMeetingInfo.action">主页</a></li>
  <li class="active">个人信息</li>
</ol>

  <c:if test="${isModifyPersonalSuccessful=='true'}">
     <div class="alert alert-success alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <strong>提示！</strong>修改成功！
</div>
    </c:if>
    
<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">个人信息</h3>
  </div>
  
  <div class="panel-body" style="padding-top: 0px;">
  <div class="row">
  <div class="col-sm-4" style=";margin-left: 10px">
  <img src="img/devid.png" style="height:250px;margin-top: 25px">
  </div>
  <div style="height: 300px;"  >
   <div style="font-size: 25px;color:black;margin-left: 100px;margin-top: 60px;font-family:迷你简菱心;" class="font_you col-sm-4">
   		${staff.SName}
   </div>
  <div class="col-sm-6" style="padding-left: 25px;margin-top: 10px;margin-left: 20px;font-size: 20px;font-family:迷你简菱心;color: #13d9f6;">
  <img src="img/sex.png" style="height: 30px;width: 30px;margin-left: 73px">
    	   <c:if test="${staff.sex == 0}"> 男 </c:if>
    	  <c:if test="${staff.sex == 1}"> 女 </c:if>
  </div> 
  
  <div class="col-sm-6" style="padding-left: 25px;margin-top: 10px;margin-left: 20px;font-size: 20px;font-family:迷你简菱心;color: #13d9f6">
  <img src="img/position.png" style="height: 30px;width: 30px;margin-left: 73px">
    	  ${staff.position}
  </div> 
  
  <div class="col-sm-6" style="padding-left: 25px;margin-top: 10px;margin-left: 20px;font-size: 20px;font-family:迷你简菱心;color: #13d9f6">
  <img src="img/department.png" style="height: 30px;width: 30px;margin-left: 73px">
    	  ${staff.department.deName}
  </div> 
   <div class="col-sm-6" style="padding-left: 25px;margin-top: 10px;margin-left: 20px;font-size: 20px;font-family:迷你简菱心;color: #13d9f6">
  <img src="img/phone.png" style="height: 30px;width: 30px;margin-left: 73px">
  		${staff.phone}
  </div> 
  </div>
   <br/>
</div>
</div>
 <div class="panel-footer" style="padding-bottom: 50px;">     
  <button type="submit" class="btn btn-danger pull-right" 
  data-toggle="modal" data-target="#inviteModal" onClick="createRequest(${staff.department.deId})">修改信息</button>
  </div>
  
</div>
</div>
</div>

<div class="modal fade" id="inviteModal">
		<div class="modal-dialog">
			<div class="modal-content" style="width:400px;">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">用户信息</h4>
				</div>
				<div class="modal-body">
				<form id="modifyForm" method="post" action="modifyPersonalInfo.action">
			 	<table>
			 	<tr>
			 	<td>
					<div class="input-group has-success" style="margin-bottom: 10px" id="nameDiv"> 
  						<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
  						<input name="userName"  id="nameInput" type="text" class="form-control" placeholder="姓名" oninput="validateNameInput()" value="${staff.SName}">
					</div> 
					</td>
					<td>
					<label class="control-label" style="color: green;margin-bottom: 15px;margin-left: 2px;" id="nameInfo">	<span class="glyphicon glyphicon-ok"></span></label>
					</td>
					</tr>
					<tr>
					<td>
					<div class="input-group has-success" style="margin-bottom: 10px">
  						<span class="input-group-addon"><span class="glyphicon glyphicon-home"></span></span>
  						<select name="departmentSe" id="departmentSe" class="form-control">
                        </select>
					</div>
					</td>
					<td>
					
					</td>
					</tr>
					
					<tr>
					<td>
					<div class="input-group has-success" style="margin-bottom: 10px" id="phoneDiv">
  						<span class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></span>
  						<input type="text" class="form-control" placeholder="电话" name="phone" id="phoneInput" value="${staff.phone}" oninput="validatePhoneInput()">
					</div>
					</td>
					<td>
					<label style="color: green;margin-bottom: 15px;margin-left: 2px;" id="phoneInfo"><span class="glyphicon glyphicon-ok"></span></label>				
					</td>
					</tr>
					
					<tr>
					<td>
					<div class="input-group has-success" style="margin-bottom: 10px" id="oldPwdDiv">
  						<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
  						<input type="password" class="form-control" placeholder="旧密码(不填表示不更改)" id="oldPwd" name="oldPwd" oninput="createGetPasswordRequest(${sessionScope.userID})">
					</div>
					</td>
					
					<td>
					<label style="color: green;margin-bottom: 15px;margin-left: 2px;" id="oldPwdInfo"><span class="glyphicon glyphicon-ok"></span></label>
					</td>
					</tr>
					<tr>
					<td>
					<div class="input-group has-success" style="margin-bottom: 10px" id="newPwdDiv">
  						<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
  						<input type="password" class="form-control" placeholder="新密码" id="newPwdInput" name="newPwdInput" oninput="validatePwd()" readonly>
					</div>
					</td>
					<td>
					<label style="color: gray;margin-bottom: 15px;margin-left: 2px;" id="newPwdInfo"><span class="glyphicon glyphicon-signal"></span></label>
					</td>
					</tr>
					
					<tr>
					<td>
					<div class="input-group" style="margin-bottom: 10px;font-size: 20px">
						<span class="input-group-addon"><span class="glyphicon glyphicon-adjust"></span></span>
						<span class="input-group-addon  form-control">
						<input type="radio" name="sex" value="0" <c:if test="${staff.sex == 0}"> checked</c:if> />男&nbsp;&nbsp;&nbsp;
  						<input type="radio" name="sex" value="1" <c:if test="${staff.sex == 1}"> checked</c:if> />女
  					    </span>
					</div>
					</td>
					<td></td>
					</tr>
					</table>
					</form>
				</div>

				
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" onclick="validateSubmit()">确定</button>
				</div>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	<!-- /.modal -->
</body>
<script src="js/jquery-2.0.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
    	function validatePwd() {
    		var pwdInput=document.getElementById("newPwdInput");
    		if(pwdInput.value.length>=6&&pwdInput.value.length<=12){
    			$("#newPwdDiv").attr("class","input-group has-success");
    			$("#newPwdInfo").css("color","green");
    			$("#newPwdInfo").html("<span class='glyphicon glyphicon-ok'></span>");
    			}
    		else{
    			$("#newPwdDiv").attr("class","input-group has-error");
    			$("#newPwdInfo").css("color","#A94442");
    			$("#newPwdInfo").html("请输入6~12位的密码");
    		}
    	}
    	
    	function validateNameInput(){
    		var nameInput=document.getElementById("nameInput");
    		var phoneInput=document.getElementById("phoneInput");
    		if(nameInput.value.length>=1){
    			$("#nameDiv").attr("class","input-group has-success");
    			$("#nameInfo").css("color","green");
    			$("#nameInfo").html("<span class='glyphicon glyphicon-ok'></span>");
    			}
    		else{
    			$("#nameDiv").attr("class","input-group has-error");
    			$("#nameInfo").css("color","#A94442");
    			$("#nameInfo").html("必填");
    		}
    	}
    	function validatePhoneInput(){
    		var phoneInput=document.getElementById("phoneInput");
    		if(phoneInput.value.length>=1){
    			$("#phoneDiv").attr("class","input-group has-success");
    			$("#phoneInfo").css("color","green");
    			$("#phoneInfo").html("<span class='glyphicon glyphicon-ok'></span>");
    			}
    		else{
    			$("#phoneDiv").attr("class","input-group has-error");
    			$("#phoneInfo").css("color","#A94442");
    			$("#phoneInfo").html("必填");
    		}
    	}
    	
    	function validateSubmit(){
    		var validateInfo="input-group has-success";
    		var form=document.getElementById("modifyForm");
    		var value1= $("#oldPwdDiv").attr("class");
    		var value2= $("#newPwdDiv").attr("class");
    		var value3= $("#nameDiv").attr("class");
    		var value4= $("#phoneDiv").attr("class");
    		
    		if(value1==value2&&value3==value4&&value1==value3&&value1==validateInfo)
    			form.submit();
    	}
    	
    	function createRequest(deID){
    		http_request = false;
    		var url="getAllDepartments.action";
    		if(window.XMLHttpRequest){
    			http_request = new XMLHttpRequest();
    		}
    		else if(window.ActiveXObject){
    			try{
    				http_request=new ActiveXObject("Msxm12.XMLHTTP");
    			}catch (e){
    				try{
    				http_request=new ActiveXObject("Microsoft.XMLHTTP");
    				}catch (e){}
    			}
    		}
    		if(!http_request){
    			alert("不能创建X对象");
    			return false;
    		}
    		http_request.onreadystatechange = function(){
    			getDepartment(deID);
    		};
    		http_request.open('GET', url, true);
    		http_request.send(null);
    	}
    	
    	function getDepartment(deID){
    		if(http_request.readyState==4){
    			if(http_request.status==200){
    				var arr = http_request.responseText;
    				var jsonss=eval("("+arr+")");
    				var departmentSe=document.getElementById("departmentSe");
    				departmentSe.options.length=0;
    					for(var i=0;i<jsonss.length;i++){
    						  var department = new Option(jsonss[i][2], jsonss[i][1]);
    						  if(deID == jsonss[i].deId) department.selected = true;
    						  departmentSe.options.add(department);
    					}
    				}//200
    				
    				}//4
    			
    	}//function
    	
    	
    	
    	function createGetPasswordRequest(sID){
    		http_request = false;
    		var url="getStaffPassword.action?sID="+sID;
    		if(window.XMLHttpRequest){
    			http_request = new XMLHttpRequest();
    		}
    		else if(window.ActiveXObject){
    			try{
    				http_request=new ActiveXObject("Msxm12.XMLHTTP");
    			}catch (e){
    				try{
    				http_request=new ActiveXObject("Microsoft.XMLHTTP");
    				}catch (e){}
    			}
    		}
    		if(!http_request){
    			alert("不能创建X对象");
    			return false;
    		}
    		http_request.onreadystatechange = function(){
    			getPasswordRequest();
    		};
    		http_request.open('GET', url, true);
    		http_request.send(null);
    	}
    	
    	function getPasswordRequest(){
    		if(http_request.readyState==4){
    			if(http_request.status==200){
    				var arr = http_request.responseText;
    				var jsonss=eval("("+arr+")");
    				var oldPwdInput=document.getElementById("oldPwd");
    				if(oldPwdInput.value==""){
    					$("#oldPwdDiv").attr("class","input-group has-success");
        				$("#oldPwdInfo").css("color","green");
        				$("#oldPwdInfo").html("<span class='glyphicon glyphicon-ok'></span>");
        				$("#newPwdInput").removeAttr("readonly");	
    				}
    				else if(oldPwdInput.value != jsonss[0] ){
    					$("#oldPwdDiv").attr("class","input-group has-error");
        				$("#oldPwdInfo").css("color","#A94442");
        				$("#oldPwdInfo").html("密码输入错误");
        				$("#newPwdInput").attr("readonly","readonly");
        			}
    				else{
    					$("#oldPwdDiv").attr("class","input-group has-success");
        				$("#oldPwdInfo").css("color","green");
        				$("#oldPwdInfo").html("<span class='glyphicon glyphicon-ok'></span>");
        				$("#newPwdInput").removeAttr("readonly");
    				}
    				
    				}//200
    				
    				}//4
    			
    	}//function
    	
    	function loadMessageCount(){
    		loadMessageCount_request = false;
    		var url="getNewMessage.action";
    		if(window.XMLHttpRequest){
    			loadMessageCount_request = new XMLHttpRequest();
    		}
    		else if(window.ActiveXObject){
    			try{
    				loadMessageCount_request=new ActiveXObject("Msxm12.XMLHTTP");
    			}catch (e){
    				try{
    					loadMessageCount_request=new ActiveXObject("Microsoft.XMLHTTP");
    				}catch (e){}
    			}
    		}
    		if(!loadMessageCount_request){
    			alert("不能创建X对象");
    			return false;
    		}
    		loadMessageCount_request.onreadystatechange = function(){
    			loadMes();
    		};
    		loadMessageCount_request.open('GET', url, true);
    		loadMessageCount_request.send(null);
    	}
    	
    	function loadMes(){
    		if(loadMessageCount_request.readyState==4){
    			if(loadMessageCount_request.status==200){
    				var arr = loadMessageCount_request.responseText;
    				var jsonss  =eval("("+arr+")");
    				var mCount=document.getElementById("mCount");
    				if(jsonss[0]!=0) mCount.innerHTML=jsonss[0];
    				}//200
    				
    				}//4
    			
    	}//function
    	
    </script>
</html>